<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/css.js"></script>
    <link rel="stylesheet" href="../css/style-zj.css">
    <script src="../layer_mobile/layer.js"></script>
    <style>
        .time-sty3{
            display: inline-block;
            width: 28px;
            background-color: #b5392d;
            line-height: 18px;
            text-align: center;
            border-radius: 3px;
            color: #fff;
            font-size: 12px;
        }
        .time-c{
            display: inline-block;
        }
    </style>
</head>
<body>
<header><a class="icon_back"></a>产品详情</header>
<div class="head_height"></div>
<div class="container product-detail" v-cloak="">
    <div class="title-top pro-det-c">
        <span>
            <span class="status-ms" v-if="product.isSeckill == 1">
                                <i class="miaosha-icon"></i>&nbsp;秒杀
                            </span>
            {{product.name}}
        </span>
        <i class="fr png fenxiang-icon"></i>
    </div>
    <div class="pro-det-c">
        <span class="price-t color-red font-18">￥{{product.nowPrice}}</span>
        <span class="color-gray line-t">￥{{product.price}}</span>

        <span class="fr color-gray1 pr-sty1">已售{{product.saleNum}}</span>
    </div>
    <div class="pro-det-c" style="margin-top: 10px;" v-if="product.isSeckill == 1">
        <span class="time"><div class="time-c">距结束 <i class="time-sty3 time-h"></i> : <i class="time-sty3 time-m"></i> : <i class="time-sty3 time-s"></i></div> </span>
        <span class="fr">剩余：{{product.seckillNum}}</span>
    </div>
    <div class="detail-c">
        <div class="li-detail li-1 fl">
            <img v-if="product" :src="imgBaseurl + product.picId" alt="">
        </div>
        <div class="li-detail li-2 fl" @click="toMap(store.lat,store.lit,store.name,store.address)">
            <div class="text-1">{{store.name}}</div>
            <div class="font-12">
                <i class="dinwei-icon"></i>
                <span class="color-gray">{{store.address}}</span>
            </div>
        </div>
        <div class="fr li-3 "><i class="li-detail fr phone-icon" :phone="store.phone"></i></div>
    </div>
    <div class="png-list pro-det-c">
        <div class="item" v-for="item in product.content" style="padding: 0">
            <img :src="imgBaseurl + item" alt="">
        </div>
    </div>
    <div class="btn_box">
        <div class="btn-make  js-yuyue">立即预约</div>
    </div>
    <!--模态框-->
    <div class="modal-choose-tc js-Modal-c hide">
        <div class="men-cen" style="display: block;"></div>
        <div class="content">
            <i class="close-m js-close-mod"></i>
            <div class="tehui-t">
                <div class="title-t">{{product.name}}</div>
                <div>
                    <span class="color-red font-18">￥{{product.nowPrice}}</span>
                    <span class="line-t color-gray marl-sty1">￥{{product.price}}</span>
                    <span class="color-gray">已售{{product.saleNum}}</span>
                </div>
            </div>
            <div class="type_box">
                <div class="tehui-t padb-28">
                    <div class="title-t">套餐选择</div>
                    <div class="snId">
                        <span class="btn-sty" v-for="item in snPriceList" :snid="item.snId">{{item.title}}</span>
                    </div>
                </div>
                <div class="tehui-t padt-20 bor-no">
                    <div class="title-t"><span>升级套餐（多选）</span></div>
                    <div class="upgradeIds">
                        <span class="btn-sty" v-for="item in upList" :upgradeids="item.id">{{item.title}}</span>
                    </div>
                </div>
            </div>
            <div class="btn-make get_order">立即预约</div>
        </div>
    </div>
</div>

</body>
<script src="../js/config.js"></script>
<script>
    var _endTime = '';

    var productId = getUrlParam("productId");

    $("body").on('click', '.js-yuyue', function () {
        $('.js-Modal-c').removeClass('hide');
    })
    $("body").on('click', '.js-close-mod', function () {
        $('.js-Modal-c').addClass('hide');
    })
    $(document).on('click', '.snId .btn-sty', function () {
        $(this).addClass("act-btn").siblings().removeClass("act-btn");
    })

    $(document).on('click', '.upgradeIds .btn-sty', function () {
        $(this).toggleClass("act-btn");
    })

    $("body").on('click', '.get_order', function () {
        var storeId = app.product.storeId;
        var snId = $(".snId .act-btn").attr("snid");
        var upgradeids = [];
        $(".upgradeIds .act-btn").each(function () {
            upgradeids.push($(this).attr("upgradeids"));
        })
        if (!snId) {
            layer.open({
                content: '请选择套餐'
                ,skin: 'msg'
                ,time: 1
            });

            return
        }
        var href = "choice_time.html?storeId=" + storeId + "&snId=" + snId + "&upgradeIds=" + upgradeids.toString() + "&productId=" + productId;
        location.href = href;
    })


    var app = new Vue({
        el: '.container',
        data: {
            imgBaseurl: imgBaseurl,
            product: '',
            store: '',
            snPriceList: '',
            upList: '',
        },
        beforeCreate: function () {
            var that = this;
            get_ajax("store/getProductDetail", {productId: productId}, function (data) {
                data.product.content = data.product.content.split(",");
                app.product = data.product;
                app.store = data.store;
                _endTime = data.product.seckillTime;
                //

                function FreshTime() {
                    var endtime = new Date(_endTime.replace(/\-/g, '/'));//结束时间
                    var nowtime = new Date();//当前时间
                    var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000); // 剩余时间
                    d = parseInt(lefttime / 3600 / 24);   // 剩余天数
                    h = parseInt((lefttime / 3600) % 24); // 剩余小时数
                    m = parseInt((lefttime / 60) % 60); // 剩余分钟数
                    s = parseInt(lefttime % 60);    // 剩余秒数
                    h = d*24+h;
                    h<10?h='0'+h:h=h;
                    m<10?m='0'+m:m=m;
                    s<10?s='0'+s:s=s;
                    document.querySelector('.time-h').innerText = h;
                    document.querySelector('.time-m').innerText = m;
                    document.querySelector('.time-s').innerText = s;
                    if (lefttime <= 0) {
                        document.querySelector('.time-c').innerHTML = "团购已结束";
                    }
                }

                if(data.product.isSeckill == 1){
                    var sh = setInterval(FreshTime, 1000); // 每秒钟执行一次
                }

            });
            get_ajax("store/getSnList", {productId: productId}, function (data) {
                app.snPriceList = data.snPriceList;
                app.upList = data.upList;
            });
        },
        updated: function () {

        },
        methods: {
            jumpDetail: function (id) {
                location.href = 'product.html?productId=' + id;
            },
            toMap:function (lat,lit,name,adress) {
                window.location.href= 'http://apis.map.qq.com/uri/v1/marker?marker=coord:'+lat+','+lit+';title:'+name+';addr: '+adress+'';
            }
        }
    })
</script>

<script>

</script>
</html>